diff options
Diffstat (limited to 'src/pages/shop/brands/[slug].js')
| -rw-r--r-- | src/pages/shop/brands/[slug].js | 178 |
1 files changed, 0 insertions, 178 deletions
diff --git a/src/pages/shop/brands/[slug].js b/src/pages/shop/brands/[slug].js deleted file mode 100644 index a387e55d..00000000 --- a/src/pages/shop/brands/[slug].js +++ /dev/null @@ -1,178 +0,0 @@ -import axios from "axios"; -import { useEffect, useState } from "react"; -import Filter from "@/components/elements/Filter"; -import Footer from "@/components/layouts/Footer"; -import Header from "@/components/layouts/Header"; -import Layout from "@/components/layouts/Layout"; -import Pagination from "@/components/elements/Pagination"; -import ProductCard from "@/components/products/ProductCard"; -import { getIdFromSlug, getNameFromSlug } from "@/core/utils/slug"; -import FilterIcon from "@/icons/filter.svg"; -import apiOdoo from "@/core/utils/apiOdoo"; -import { Swiper, SwiperSlide } from "swiper/react"; -import "swiper/css"; -import "swiper/css/pagination"; -import "swiper/css/autoplay"; -import { Pagination as SwiperPagination } from "swiper"; -import Image from "@/components/elements/Image"; -import LineDivider from "@/components/elements/LineDivider"; - -export async function getServerSideProps(context) { - const { - slug, - page = 1, - category = '', - price_from = '', - price_to = '', - order_by = '', - } = context.query; - - let urlParameter = [ - 'q=*', - `page=${page}`, - `brand=${getNameFromSlug(slug)}`, - `category=${category}`, - `price_from=${price_from}`, - `price_to=${price_to}`, - `order_by=${order_by}` - ].join('&'); - let searchResults = await axios(`${process.env.SELF_HOST}/api/shop/search?${urlParameter}`); - searchResults = searchResults.data; - - const manufacture = await apiOdoo('GET', `/api/v1/manufacture/${getIdFromSlug(slug)}`); - - return { - props: { - searchResults, - page, - slug, - category, - price_from, - price_to, - order_by, - manufacture - } - }; -} - -export default function BrandDetail({ - searchResults, - page, - slug, - category, - price_from, - price_to, - order_by, - manufacture -}) { - const pageCount = Math.ceil(searchResults.response.numFound / searchResults.responseHeader.params.rows); - const productStart = searchResults.responseHeader.params.start; - const productRows = searchResults.responseHeader.params.rows; - const productFound = searchResults.response.numFound; - - const [activeFilter, setActiveFilter] = useState(false); - const [filterCount, setFilterCount] = useState(0); - - const route = () => { - let route = `/shop/brands/${slug}`; - if (category) route += `&category=${category}`; - if (price_from) route += `&price_from=${price_from}`; - if (price_to) route += `&price_to=${price_to}`; - if (order_by) route += `&order_by=${order_by}`; - return route; - } - - useEffect(() => { - let calculateFilterCount = 0; - if (category) calculateFilterCount++; - if (price_from || price_to) calculateFilterCount++; - if (order_by) calculateFilterCount++; - setFilterCount(calculateFilterCount); - }, [category, price_from, price_to, order_by]); - - return ( - <> - <Header title={`Distributor ${getNameFromSlug(slug)} Indonesia Harga Official - Indoteknik`} /> - <Filter - defaultRoute={`/shop/brands/${slug}`} - isActive={activeFilter} - closeFilter={() => setActiveFilter(false)} - defaultPriceFrom={price_from} - defaultPriceTo={price_to} - defaultBrand='' - defaultCategory={category} - defaultOrderBy={order_by} - searchResults={searchResults} - disableFilter={['brand']} - /> - <Layout> - <Swiper slidesPerView={1} pagination={{dynamicBullets: true}} modules={[SwiperPagination]}> - { - manufacture.banners?.map((banner, index) => ( - <SwiperSlide key={index}> - <Image - src={banner} - alt={`Banner ${manufacture.name}`} - className="w-full h-auto border-b border-gray_r-6" - /> - </SwiperSlide> - )) - } - </Swiper> - <div className="p-4 grid grid-cols-2"> - <div> - <p className="text-caption-2 text-gray_r-11 mb-2">Produk dari brand:</p> - { manufacture.logo ? ( - <div className="w-8/12"> - <Image src={manufacture?.logo} alt={manufacture.name} className="border border-gray_r-6 rounded p-3" /> - </div> - ) : ( - <p className="badge-solid-red text-caption-1">{ manufacture.name }</p> - ) } - </div> - <div className="text-right"> - <p className="text-caption-2 text-gray_r-11 mb-2">Jumlah Produk:</p> - <p>{ searchResults.response.numFound }</p> - </div> - </div> - - <LineDivider /> - - <div className="p-4"> - <h1 className="mb-2">Produk</h1> - <div className="text-caption-1 mb-4"> - {productFound > 0 ? ( - <> - Menampilkan - {pageCount > 1 ? ( - <> - {productStart + 1}-{ - (productStart + productRows) > productFound ? productFound : productStart + productRows - } - dari - </> - ) : ''} - {searchResults.response.numFound} - produk untuk brand <span className="font-semibold">{getNameFromSlug(slug)}</span> - </> - ) : 'Mungkin yang anda cari'} - </div> - <button className="btn-light py-2 flex items-center gap-x-2 mb-4" onClick={() => setActiveFilter(true)}> - <FilterIcon className="w-4 h-4" /> <span>Filter {filterCount > 0 ? `(${filterCount})` : ''}</span> - </button> - <div className="grid grid-cols-2 gap-3"> - {searchResults.response.products.map((product) => ( - <ProductCard key={product.id} data={product} /> - ))} - </div> - - <div className="mt-4"> - <Pagination pageCount={pageCount} currentPage={parseInt(page)} url={route()} /> - </div> - </div> - - <Footer /> - </Layout> - </> - ) -}
\ No newline at end of file |